@use '../color/index' as colorPalette;
@forward "../color/index";


/* 样式前缀定义 START */
//须与configProvider中的样式前缀保持一致
$prefix: au;
// ICONFONT
$iconfont-css-prefix: au-icon;  //图标前缀
/* 样式前缀定义 END */

/* -----------  color  ——————---- start */
$theme-color: colorPalette.$deep-blue-6; // 主题色
$theme-color-level1: colorPalette.$deep-blue-1;
$theme-color-level2: colorPalette.$deep-blue-2;
$theme-color-level3: colorPalette.$deep-blue-3;
$theme-color-level4: colorPalette.$deep-blue-4;
$theme-color-level5: colorPalette.$deep-blue-5;
$theme-color-level6: colorPalette.$deep-blue-6;
$theme-color-level7: colorPalette.$deep-blue-7;
$theme-color-level8: colorPalette.$deep-blue-8;
$theme-color-level9: colorPalette.$deep-blue-9;

$theme-color-disabled: $theme-color-level3; // 禁用底色
$theme-color-hover: $theme-color-level5;  // 悬浮底色
$theme-color-click: $theme-color-level7;// 点击底色
$theme-color-active-light: $theme-color-level1; // 选中浅色
$theme-color-active-dark: $theme-color; // 选中深色

$success-color: #1ba854; // 成功色文字(深)
$success-bg-color: #f2fff5; // 成功反馈浮层的底色
$success-border-color: #6dd18e; // 成功反馈浮层的容器边框色
$warning-color: #ff991c; // 警示色文字(深)
$warning-bg-color: #fffbf2; // 警示反馈浮层的底色
$warning-border-color: #ffcb78; // 警示反馈浮层的容器边框色
$error-color: #fb2323;    // 失败色文字(深)
$error-bg-color: #fff2f4; // 失败反馈浮层的底色
$error-border-color: #ff8088; // 失败反馈浮层的容器边框色
$ongoing-color: #276ff5;   // 进行中文字(深)
$ongoing-bg-color: #f2f9ff; // 进行中反馈浮层的底色
$ongoing-border-color: #85b8ff; // 进行中反馈浮层的容器边框色
$disabled-color: #b2b2b2; // 失效色文字
$disabled-border-color: #ccc; // 失效边框色
$end-color: $theme-color-level1; // 暂停或者终止等状态文字色
$end-bg-color: #666; // 暂停或者终止等状态背景色
$end-border-color: #666; // 暂停或者终止等状态边框色
$link-color: $theme-color; // 链接文字色
$link-color-hover: #3987ed; // 链接色或辅助色(悬浮)
$link-color-active: #0041b0; // 链接色或辅助色(点击)

$strong-border-color: #d9d9d9; // 强线条 --带操作
$strong-border-color-1: #d9d9d9; // 强线条 --分割内容/容器包裹线
$strong-border-color-2: rgba(217, 217, 217, 0.65); // 次级边框
$weak-border-color: #e5e5e5; // 弱线条 -- 需要多层级时

$primary-text-color: rgba(255, 255, 255, 1); // 一级文本
$secondary-text-color: #666; // 二级文本
$secondary-text-color2: rgba(255, 255, 255, 0.65); // 二级文本
$secondary-text-color3: rgba(102, 102, 102, 0.65); // 二级文本
$third-text-color: #999; // 三级文本
$placeholder-text-color: #ccc; // 占位符文本

$contain-bg: #fafafa; // 容器内的灰背景色
/* -----------  color  ——————---- end */

/* -----------  Shadow  ——————---- start */
$shadow-color: rgba(0, 0, 0, 0.15);
$shadow-color-inverse: $contain-bg;
$shadow-1-up: 0 -6px 16px -8px rgba(0, 0, 0, 0.08), 0 -9px 28px 0 rgba(0, 0, 0, 0.05),
  0 -12px 48px 16px rgba(0, 0, 0, 0.03);
$shadow-1-down: 0 6px 16px -8px rgba(0, 0, 0, 0.08), 0 9px 28px 0 rgba(0, 0, 0, 0.05),
  0 12px 48px 16px rgba(0, 0, 0, 0.03);
$shadow-1-left: -6px 0 16px -8px rgba(0, 0, 0, 0.08), -9px 0 28px 0 rgba(0, 0, 0, 0.05),
  -12px 0 48px 16px rgba(0, 0, 0, 0.03);
$shadow-1-right: 6px 0 16px -8px rgba(0, 0, 0, 0.08), 9px 0 28px 0 rgba(0, 0, 0, 0.05),
  12px 0 48px 16px rgba(0, 0, 0, 0.03);
$shadow-2: 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 6px 16px 0 rgba(0, 0, 0, 0.08),
  0 9px 28px 8px rgba(0, 0, 0, 0.05);
$box-shadow-base: $shadow-2;
/* -----------  Shadow  ——————---- end */

/* -----------  motion  ——————---- start */
$ease-out: cubic-bezier(0,.4,.4,1);
$ease-in: cubic-bezier(0.4,0,1,0.6);
$ease: cubic-bezier(0.4,0,0.6,1);
/* -----------  motion  ——————---- end */

/* -----------  font  ——————---- start */
$font-weight: 400;
$small-font-size: 12px;
$middle-font-size: 14px;
$large-font-size: 16px;
$x-large-font-size: 18px;
$xx-large-font-size: 20px;

$font-size: $small-font-size;  // 默认全局字体12px
/* -----------  font  ——————---- end */

$radius-size: 2px; // 圆角值

/* -----------  zIndex  ——————---- start */
/*
    普通组件内部自身层级应设置在0-100间
*/
$zIndex-below: -1; // 置于下层
$zIndex-popper: 1050; // 弹出层
$zIndex-dialog: 1050; // 对话框
$zIndex-message:1010; // 消息(message)
$zIndex-masker: 3000; // 遮罩层 （loading等）
$zIndex-apex: 9999; // 顶层 （notify）
/* -----------  zIndex  ——————---- end */

/* -----------  Button  ——————---- start */
$btn-border-width: 1px;
$btn-border-style: solid;

// primary start//
$btn-primary-font-color: colorPalette.$white; // 基础文字颜色
$btn-primary-background-color: $theme-color; // 基础背景颜色
$btn-primary-border-color: $theme-color; // 基础边框颜色

$btn-primary-hover-font-color: colorPalette.$white; //悬浮文字颜色
$btn-primary-hover-background-color: $theme-color-level5; // 悬浮背景颜色
$btn-primary-hover-border-color: $theme-color-level5; //悬浮边框颜色

$btn-primary-active-font-color: colorPalette.$white;
$btn-primary-active-background-color: $theme-color-level7;
$btn-primary-active-border-color: $theme-color-level7;

$btn-primary-disabled-font-color: colorPalette.$white !important;
$btn-primary-disabled-background-color: $theme-color-level3 !important;
$btn-primary-disabled-border-color: $theme-color-level3 !important;
// primary end//

// ghost start//
$btn-ghost-font-color: $theme-color-level5; // 幽灵按钮文字颜色
$btn-ghost-background-color: colorPalette.$white; // 幽灵背景颜色
$btn-ghost-border-color: $strong-border-color; //幽灵边框颜色

$btn-ghost-hover-font-color: colorPalette.$white; //悬浮文字颜色
$btn-ghost-hover-background-color: $theme-color-level5; // 悬浮背景颜色
$btn-ghost-hover-border-color: $theme-color-level5; //悬浮边框颜色

$btn-ghost-active-font-color: colorPalette.$white;
$btn-ghost-active-background-color: $theme-color-level7;
$btn-ghost-active-border-color: $theme-color-level7;

$btn-ghost-disabled-font-color: colorPalette.$white !important;
$btn-ghost-disabled-background-color: $theme-color-level3 !important;
$btn-ghost-disabled-border-color: $theme-color-level3 !important;
// ghost end//

$btn-secondary-font-color: $secondary-text-color3; // 次要文字颜色
$btn-secondary-background-color: colorPalette.$white; // 次要背景颜色
$btn-secondary-border-color: $strong-border-color-2; // 次要边框颜色

$btn-secondary-hover-font-color: colorPalette.$white; //悬浮文字颜色
$btn-secondary-hover-background-color: $theme-color-level5; // 悬浮背景颜色
$btn-secondary-hover-border-color: $theme-color-level5; //悬浮边框颜色

$btn-secondary-active-font-color: colorPalette.$white;
$btn-secondary-active-background-color: $theme-color-level7;
$btn-secondary-active-border-color: $theme-color-level7;

$btn-secondary-disabled-font-color: colorPalette.$white !important;
$btn-secondary-disabled-background-color: $theme-color-level3 !important;
$btn-secondary-disabled-border-color: $theme-color-level3 !important;

// link start//
$btn-link-font-color: $theme-color; // 链接文字颜色
$btn-link-background-color: transparent; // 链接背景色
$btn-link-border-color: transparent; // 链接边框色

$btn-link-hover-font-color: colorPalette.$white; //悬浮文字颜色
$btn-link-hover-background-color: $theme-color; // 悬浮背景颜色
$btn-link-hover-border-color: $theme-color; //悬浮边框颜色

$btn-link-active-font-color: colorPalette.$white;
$btn-link-active-background-color: $theme-color-level7;
$btn-link-active-border-color: $theme-color-level7;

$btn-link-disabled-font-color: colorPalette.$white !important;
$btn-link-disabled-background-color: $theme-color-level3 !important;
$btn-link-disabled-border-color: $theme-color-level3 !important;
// link start//

// text start//
$btn-text-font-color: $theme-color; // 文本文字颜色
$btn-text-background-color: transparent; // 文本背景色
$btn-text-border-color: transparent; // 文本边框色

$btn-text-hover-font-color: $theme-color-level4; //悬浮文字颜色
$btn-text-hover-background-color: transparent; // 悬浮背景颜色
$btn-text-hover-border-color: transparent; //悬浮边框颜色

$btn-text-active-font-color: $theme-color-level7;
$btn-text-active-background-color: transparent;
$btn-text-active-border-color: transparent;

$btn-text-disabled-font-color: $theme-color-level4 !important;
$btn-text-disabled-background-color: transparent !important;
$btn-text-disabled-border-color: transparent !important;
// text start//

$btn-disabled-font-color: colorPalette.$white; // 禁用状态 文字颜色
$btn-disabled-background-color: $theme-color-level1; // 禁用状态 背景颜色
$btn-disabled-border-color: $disabled-border-color; // 禁用状态 边框颜色

$btn-danger-font-color: colorPalette.$white; // 危险状态 文字颜色
$btn-danger-background-color: $error-color; // 危险状态 背景颜色
$btn-danger-border-color: $error-color; // 危险状态 边框颜色

$btn-small-font-size: $small-font-size; // 小号 文字大小
$btn-small-height: 24px; // 小号 高度
$btn-small-min-width: 60px; // 小号 最小宽度
$btn-small-padding-vertical: 3px; // 小号 内间距 纵向
$btn-small-padding-horizontal: 8px; // 小号 内间距 横向

$btn-middle-font-size: $small-font-size; // 中号 文字大小
$btn-middle-height: 28px; // 中号 高度
$btn-middle-min-width: 60px; // 中号 最小宽度
$btn-middle-padding-vertical: 5px; // 中号 内间距 纵向
$btn-middle-padding-horizontal: 8px; // 中号 内间距 纵向

$btn-large-font-size: $large-font-size; // 大号 文字大小
$btn-large-height: 32px; // 大号 高度
$btn-large-min-width: 80px; // 大号 最小宽度
$btn-large-padding-vertical: 6px; // 大号 内间距 纵向
$btn-large-padding-horizontal: 8px; // 大号 内间距 横向
$btn-transition-fn: cubic-bezier(0.075, 0.82, 0.165, 1);

$btn-icon-small-font-size: $small-font-size;
$btn-icon-middle-font-size: $middle-font-size;
$btn-icon-large-font-size: $large-font-size;

$btn-icon-padding-horizontal: 4px;
/* -----------  Button  ——————---- end */

/* -----------  Message  ——————---- start */
$message-notice-content-padding: 10px 16px;
$message-notice-content-bg: $contain-bg;
/* -----------  Message  ——————---- end */
/* -----------  Tag  ——————---- start */
$tag-border-width: 1px;
$tag-border-style: solid;
$tag-font-color: #333;

$tag-small-font-size: $small-font-size;
$tag-small-height: 24px;
$tag-small-min-width: 60px;
$tag-small-padding-vertical: 3px;
$tag-small-padding-horizontal: 8px;

$tag-middle-font-size: $middle-font-size;
$tag-middle-height: 28px;
$tag-middle-min-width: 60px;
$tag-middle-padding-vertical: 5px;
$tag-middle-padding-horizontal: 8px;

$tag-large-font-size: $large-font-size;
$tag-large-height: 32px;
$tag-large-min-width: 80px;
$tag-large-padding-vertical: 6px;
$tag-large-padding-horizontal: 8px;

/**
TODO:: tag disabled 样式效果暂时设计未定义颜色板
 */
$tag-disabled-background-color: $theme-color-level3;
$tag-disabled-border-color: $theme-color-level3;
$tag-disabled-font-color: colorPalette.$white;

/* -----------  Tag  ——————---- end */


/* -----------  icon  ——————---- start */
$icon-small-font-size: $small-font-size; // 小号 文字大小
$icon-middle-font-size: $middle-font-size; // 中号 文字大小
$icon-large-font-size: $large-font-size; // 大号 文字大小
/* -----------  icon  ——————---- end */


/* -----------  Select  ——————---- start */
$select-border-color-border: $strong-border-color; // 边框色
$select-color-border-hover: $theme-color; // 悬浮时border的颜色
$select-placeholder-color: $placeholder-text-color; // placeholder
$select-color-text: $secondary-text-color;// 文字颜色
$select-color-text-disabled: $disabled-color;// 禁用状态文字颜色
$select-color-background-disabled: $contain-bg; //禁用背景色
$select-arrow-icon-color-text-disabled: $disabled-color;//禁用icon
$select-list-font-size: $small-font-size;
$select-dropdown-bg: #fff;
$select-radius-border: $radius-size;
$select-dropdown-height:28px;
$select-dropdown-line-height: 22px;
$select-item-selected-color: $theme-color;
$select-item-selected-bg: $theme-color-level1;

$select-small-font-size: $small-font-size; // 小号 文字大小
$select-small-height: 24px; // 小号 高度
$select-small-line-height: 12px; // 小号 字高

$select-middle-font-size: $middle-font-size; // 中号 文字大小
$select-middle-height: 28px; // 中号 高度
$select-middle-line-height: 22px; // 中号 字高


$select-large-font-size: $large-font-size; // 大号 文字大小
$select-large-height: 32px; // 大号 高度
$select-large-line-height: 28px; // 大号字高

/* -----------  Select  ——————---- end */
